<template>
    <div class="card flex flexC" :style="{background:item.bk}" @click="toNavigate(item.route)">
            <div class="card-top">
                {{item.title}}
            </div>
            <div class="card-num">
                     {{item.num}}
            </div>
    </div>
</template>



<script>
export default {
       props:['item'],
       name:"card",
       data(){
            return  {}
       },
       methods:{
           toNavigate(route){
               this.$toRoutePath({
                   path: route,
                   edit: true,
                   query: {}
               });
           }
       },
       mounted(){}
}
</script>

<style lang="less">
        .card{
             color: #ffffff;
             justify-content: space-around;
             overflow: hidden;
             padding-left: 15px;
             height:82px;
             border-radius:8px;
             .card-top{
                   width: 150px;
                   text-align: center; 
                   font-size: 14px;
                   font-weight: bold;
                   letter-spacing: 2px;
                   text-align:left;
             }
             .card-num{
                   text-align: center;
                   width: 150px;   
                   font-size:17.28px;     
                   text-align: left; 
             }
               
        }
    
</style>